<template>
	<view class="zlcSelect">
		<up-select ref="zlcSelectRef" :maxHeight="props.maxHeight" style="width: 100%;" :current="props.modelValue" :label="props.label"
			:showOptionsLabel="!!props.modelValue" :options="options" :keyName="keyName" :labelName="labelName">
			<template v-slot:icon>
				<view class="iconSlot">
					<i class="iconfont icon-xiajiantou zlcIcon" v-if="!props.modelValue"></i>
					<up-icon name="close-circle-fill" size="30rpx" v-else @tap.stop.prevent="resetModelValue($event)"></up-icon>
				</view>
			</template>
			<template v-slot:options>
				<view class="options_item" v-for="(item, index) in props.options" :key="index" @click="select(item)">
					{{ item[props.labelName] }}
				</view>
			</template>
		</up-select>
	</view>
</template>

<script lang="ts" setup>
	import { withDefaults, defineProps, defineEmits, ref, onMounted, watch } from "vue"
	let zlcSelectRef = ref(null)
	interface CateItem {
		id : string
		name : string
		[k : string] : any
	}
	interface Props {
		modelValue : string
		options : CateItem[]
		keyName : string
		labelName : string
		showOptionsLabel : boolean
		label : string
		maxHeight: string
	}
	//传递的页面标题
	const props = withDefaults(defineProps<Props>(), {
		modelValue: '',
		options: () => [],
		keyName: 'id',
		labelName: 'name',
		showOptionsLabel: false,
		label: '',
		maxHeight: '30vh',
		type: ""
	})
	//接受事件
	const emits = defineEmits(['update:modelValue', 'change'])

	//选择
	let select = (e : CateItem) : void => {
		zlcSelectRef.value.overlayClick()
		emits('update:modelValue', e[props.keyName])
		emits('change', e[props.keyName])
	}

	//清空
	let resetModelValue = (event : any) : void => {
		emits('update:modelValue', '')
		emits('change', '')
	}
	
</script>
<script lang="ts">
	export default {
		options: {
			styleIsolation: 'shared',
		}
	}
</script>

<style lang="scss" scoped>
	.zlcSelect {
		width: 100%;

		.iconSlot {
			display: flex;
			flex-direction: row;
			align-items: center;
			.zlcIcon{
				font-size: 28rpx;
			}
		}
		
		::v-deep .u-select__label {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center !important;
			font-size: 28rpx;
		}
		
		::v-deep .u-select__text {
			width: fit-content;
			max-width: calc(100% - 40rpx);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		::v-deep .options_item{
			// width: fit-content;
			max-width: 500rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
</style>